<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="./css/form.css" rel="stylesheet">
    <!-- Import style -->
    <link rel="stylesheet" href="http://unpkg.com/element-plus/dist/index.css" />
    <!-- Import Vue 3 -->
    <script src="http://unpkg.com/vue@3"></script>
    <!-- Import component library -->
    <script src="http://unpkg.com/element-plus"></script>
</head>

<body>
    <div id="app">
        <el-row>
            <el-col :md="6" :sm="24"></el-col>
            <el-col :md="6" :sm="24"></el-col>
            <el-col :md="6" :sm="24">
                <div class="form">
                    <el-form :model="form" label-width="auto" style="max-width: 600px">
                        <el-form-item label="账号">
                            <el-input v-model="form.account" />
                        </el-form-item>
                        <el-form-item label="密码">
                            <el-input v-model="form.password" />
                        </el-form-item>
                        <el-form-item label="姓名">
                            <el-input v-model="form.name" />
                        </el-form-item>
                        <el-form-item label="所在地区">
                            <el-select v-model="form.region" placeholder="请选择您所在的地区">
                                <el-option label="上海" value="shanghai" />
                                <el-option label="北京" value="beijing" />
                                <el-option label="杭州" value="hangzhou" />
                                <el-option label="金华" value="jinhua" />
                            </el-select>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="性别">
                            <el-radio-group v-model="form.sex">
                                <el-radio value="保密">保密</el-radio>
                                <el-radio value="男">男</el-radio>
                                <el-radio value="女">女</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="兴趣爱好">
                            <el-checkbox-group v-model="form.hobby">
                                <el-checkbox value="音乐" name="type">
                                    音乐
                                </el-checkbox>
                                <el-checkbox value="影视" name="type">
                                    影视
                                </el-checkbox>
                                <el-checkbox value="运动" name="type">
                                    运动
                                </el-checkbox>
                                <el-checkbox value="其他" name="type">
                                    其他
                                </el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item label="签名档">
                            <el-input v-model="form.desc" type="textarea" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">提交</el-button>
                            <el-button>取消</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
            <el-col :md="6" :sm="24"></el-col>
        </el-row>
        
        <el-dialog v-model="dialogVisible" title="请确认你的信息" width="500">
            <p>账号：{{form.account}}</p>
            <p>密码：{{form.password}}</p>
            <p>姓名：{{form.name}}</p>
            <p>性别：{{form.sex}}</p>
            <p>爱好：{{form.hobby}}</p>
            <p>所属地区：{{form.region}}</p>
            <p>签名档：{{form.desc}}</p>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</body>
<script>
    const app = {
        data() {
            return {
                form: {
                    account: "",
                    password: "",
                    name: "",
                    region: "",
                    sex: 0,
                    hobby: [],
                    desc: "",
                },
                dialogVisible:false
            }
        },
        methods: {
            onSubmit() {
                console.log(this.form);
                this.dialogVisible=true;
            }

        }
    }
    Vue.createApp(app).use(ElementPlus).mount("#app")
</script>

</html>